<template>
	<view class="container">
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>姓名
			</view>
			<input type="text" v-model="egressRecord.inputPerson" placeholder="请输入登记人" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>联系方式
			</view>
			<input type="number" v-model="egressRecord.inputPhone" placeholder="请输入联系方式" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>身份证号
			</view>
			<input type="idcard" v-model="egressRecord.inputIdCard" placeholder="请输入身份证号" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>外出时间
			</view>
			<view class="picker_class" @click="showDateTime">
				{{egressRecord.inputTime}}
			</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>外出类型
			</view>
			<view class="picker_class">
				<radio-group @change="radioChange" v-model="egressRecord.resourceType">
					<label class="radio">
						<radio value="0" checked="true" style="transform: scale(0.6);" />国内</label>
					<label class="radio">
						<radio value="1" style="transform: scale(0.6);margin-left:10upx" />国外</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>外出地址
			</view>
			<view class="picker_class" @click="showTarget">{{egressRecord.inputTarget}}</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				外出原因
			</view>
			<textarea v-model="egressRecord.inputReason" class="picker_content_class" placeholder-style="line-height:50upx"
			 placeholder="请输入外出原因">
			 </textarea>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>体温
			</view>
			<input type="digit" v-model="egressRecord.inputTemperature" placeholder="请输入体温" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>健康状况
			</view>
			<picker mode="selector" :value="egressRecord.inputHealth" :range="healthArray" @change="bindHealthChange" class="picker_class">
				<view class="uni-input">{{egressRecord.inputHealth}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width:440upx">
				<span style="color: red;">*</span>是否做过核酸检测
			</view>
			<view class="picker_class">
				<radio-group @change="isNucleicTestChange" v-model="egressRecord.isNucleicTest">
					<label class="radio">
						<radio value="1" checked="true" style="transform: scale(0.6);" />是</label>
					<label class="radio">
						<radio value="0" style="transform: scale(0.6);margin-left:10upx" />否</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item" style="margin-bottom: 200upx;">
			<view class="group_title">
				备注
			</view>
			<textarea v-model="egressRecord.inputRemark" class="picker_content_class" placeholder-style="line-height:50upx"
			 placeholder="请输入备注">
			 </textarea>
		</view>

		<view>
			<wPicker mode="dateTime" @confirm="confirmDate" ref="dateTime" themeColor="#f00" :current="true"></wPicker>
			<wPicker mode="region" @confirm="confirmTarget" ref="targetRegion" themeColor="#f00" :defaultVal="defaultSourceRegion"
			 :hideArea="false"></wPicker>
		</view>
		<button type="primary" class="button_class" @click="addRegistration">提交</button>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";

	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				areaCode: this.$api.util.getAreaCode(),
				userId: "",
				egressRecord: {
					inputPerson: '',
					inputPhone: "",
					inputIdCard: "",
					inputTime: "请选择时间",
					resourceType: "0",
					inputSource: "",
					inputTarget: "请选择外出地址",
					inputReason: "",
					inputTemperature: "",
					inputHealth: "请选择健康状况",
					isNucleicTest: "1",
					inputRemark: ""
				},
				healthArray: ["健康", "不健康"],
				transportations: ["火车", "汽车", "飞机", "轮船", "其他"],
				defaultSourceRegion: ["四川省", "成都市", "武侯区"]
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.userId = userInfo.userUuid
			}
			this.getOwnerInfo();
			
		},
		methods: {
			/**
			 * 获取用户信息
			 */
			getOwnerInfo() {
				let params = {
					userId: this.userId
				}
				this.$api.request.getOwnerByUserId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						let ownerInfo = res.body.data[0]
						if (ownerInfo) {
							this.egressRecord.inputIdCard = ownerInfo.idCard;
							this.egressRecord.inputPerson = ownerInfo.name;
							this.egressRecord.inputPhone = ownerInfo.telNo;
						}
					}
				})
			},
			addRegistration() {
				if (!this.egressRecord.inputPerson) {
					this.$api.msg('请输入姓名');
					return;
				}
				if (!this.$api.util.validateMobileNo(this.egressRecord.inputPhone)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if (!this.$api.util.validateIdCardNo(this.egressRecord.inputIdCard)) {
					this.$api.msg('请输入正确的身份证号');
					return;
				}
				if (this.egressRecord.inputTime == "请选择时间") {
					this.$api.msg('请选择时间');
					return;
				}
				if (this.egressRecord.inputTarget == "请选择外出地址") {
					this.$api.msg('请选择外出地址');
					return;
				}
				if (!this.egressRecord.inputTemperature) {
					this.$api.msg('请输入体温');
					return;
				}
				if (this.egressRecord.inputHealth == "请选择健康状况") {
					this.$api.msg('请选择健康状况');
					return;
				}

				let params = {
					name: this.egressRecord.inputPerson,
					phone: this.egressRecord.inputPhone,
					idCard: this.egressRecord.inputIdCard,
					time: this.egressRecord.inputTime,
					type: this.egressRecord.resourceType,
					address: this.egressRecord.inputTarget,
					reason: this.egressRecord.inputReason,
					temperature: this.egressRecord.inputTemperature,
					health: this.egressRecord.inputHealth == "健康" ? "1" : "0",
					test: this.egressRecord.isNucleicTest,
					remark: this.egressRecord.inputRemark,
					category: "0",
					areaCode: this.areaCode,
					userId: this.userId
				}
				this.$api.request.addRegister(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.$api.msg("添加成功")
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						this.$api.msg("添加失败")
					}
				})
			},
			isNucleicTestChange(e) {
				this.egressRecord.isNucleicTest = e.detail.value
			},
			bindHealthChange(e) {
				this.egressRecord.inputHealth = this.healthArray[e.target.value]
			},
			isToEpidemicAreaRadioChange(e) {
				this.egressRecord.isToEpidemicArea = e.detail.value
			},
			bindTransportChange(e) {
				this.egressRecord.inputTransport = this.transportations[e.target.value]
			},
			radioChange(e) {
				this.egressRecord.resourceType = e.detail.value
			},
			showTarget() {
				this.$refs['targetRegion'].show();
			},
			confirmTarget(e) {
				this.egressRecord.inputTarget = e.result
			},
			showDateTime() {
				this.$refs['dateTime'].show();
			},
			confirmDate(e) {
				this.egressRecord.inputTime = e.result
			}
		},
		components: {
			wPicker
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 200upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		position: fixed;
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}
</style>
